import $ from '../../axios'
import React, { useEffect, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Tabs, NavBar, Button, Toast } from 'react-vant'
import { Search } from '@react-vant/icons'
import { Tab } from 'antd-mobile/es/components/tabs/tabs'

export default function Gold() {
    const navgiate = useNavigate()
    let [a, b] = useSearchParams()
    let [gdata, setGda] = useState([])
    let [sdata, setSda] = useState([])
    let [exp, setExp] = useState(true)
    let [gz, setGz] = useState(true)
    const getdata = async () => {
        await $.get(`/glod_get?_id=${a.get("_id")}`).then((data) => {
            setGda(data.data.data)
        })
    }
    const getshow = async () => {
        await $.get(`/glod_get?name=${a.get("_id")}`).then((data) => {
            setSda(data.data.data)
        })
    }

    const putstate = async () => {
        let data = { ...sdata[0], follow: 1 }
        // console.log(a.get("_id"), data);
        await $.put(`/g_put?_id=${a.get("_id")}`, data)
    }
    useEffect(() => {
        getdata()
        getshow()
    }, [])

    return (
        <div style={{
            backgroundSize: "cover",
            backgroundImage: "url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F15%2F20200315210039_xmnoo.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1713152288&t=023354fe1e4d34d65ed6dbcb9eb495ae')"
        }}>
            <div className="g-head" style={{ height: "200px" }}>
                <NavBar
                    title="宝库详情"
                    leftText="返回"
                    rightText="加入它"
                    onClickLeft={() => { navgiate("/gshow") }}
                    onClickRight={() => { putstate() }}
                />
                <div style={{ marginTop: "10px", display: "flex", alignItems: "center" }}>
                    <img src="/2.jpg" alt="" style={{ width: "100px", height: "100px", borderRadius: "10px", marginLeft: "10px" }} />
                    <div style={{ marginLeft: "20px" }}>
                        {
                            sdata.map(el => (
                                <div key={el._id}>
                                    <h1 style={{ color: "white" }}>{el.title}</h1>
                                    <p style={{ color: "white" }}>已有*****人关注</p>
                                </div>
                            ))
                        }
                    </div>
                    {
                        exp ? <Button plain type='info' size='mini' style={{ marginLeft: "50px" }} onClick={() => {
                            Toast.success('经验+3')
                            setExp(false)
                        }}>签到</Button> : <Button plain type='info' size='mini' style={{ marginLeft: "50px" }} disabled >签到</Button>
                    }
                </div>
            </div>
            <div className="g-body" style={{ border: "1px solid black", height: "460px", borderRadius: "10px", borderBottom: "0", backgroundColor: "white" }}>
                <div>
                    <Tabs color='green' >
                        <Tabs.TabPane key={1} title={"宝库交流"}>
                            <div style={{ marginLeft: "20px" }}>
                                {
                                    gdata.map(el => (
                                        <div key={el._id} style={{ marginTop: "10px", borderBottom: "1px solid black", width: "90%" }}>
                                            <div style={{ display: "flex" }}>
                                                <p>用户-{el._id}</p>
                                                {
                                                    gz ? <Button plain type='primary' size='mini' style={{ marginLeft: "50px" }} onClick={() => {
                                                        setGz(false)
                                                    }}>关注他</Button> : <Button plain type='primary' size='mini' style={{ marginLeft: "50px" }} disabled >已关注</Button>
                                                }
                                            </div>
                                            <p>{el.connect}</p>
                                            <img src={'http://101.200.186.98:5173/' + el.img} style={{ width: "80px", height: "80px" }} />
                                        </div>
                                    ))
                                }
                            </div>
                        </Tabs.TabPane>
                        <Tabs.TabPane key={2} title={"装备展示"}>
                            <div style={{ display: "flex", flexWrap: "wrap" }}>
                                {
                                    gdata.map(el => (
                                        <img src={'http://101.200.186.98:5173/' + el.img} style={{ width: "160px", height: "160px", marginLeft: "10px", marginTop: "20px" }} key={el._id} />
                                    ))
                                }
                            </div>
                        </Tabs.TabPane>
                        <Tabs.TabPane key={3} title={"装备手办"}>
                            下划线标签页
                        </Tabs.TabPane>
                        <Tabs.TabPane key={4} title={"我的宝库"}>
                            下划线标签页
                        </Tabs.TabPane>
                    </Tabs>
                </div>
            </div>
        </div>
    )
}
